<template>
  <el-dialog :visible.sync="open" :width="width" append-to-body @close="close" @closed="closed" :fullscreen="full" class="dialog-custom" :close-on-click-modal="closeOnClickModal">
    <template slot="title">
      <span class="el-dialog__title">{{ title }}</span>
      <button type="button" class="el-dialog__headerbtn maximize-btn" @click="changeFullscreen" :title="fullscreen ? '还原' : '最大化'">
        <svg-icon :icon-class="fullscreen ? 'restore' : 'maximize'"/>
      </button>
    </template>
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "FullDialog",
  props: {
    visible: {
      type: Boolean
    },
    width: {
      type: String,
      default: "50%"
    },
    fullscreen: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ""
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      open: this.visible,
      full: this.fullscreen
    }
  },
  methods: {
    changeFullscreen() {
      this.full = !this.full;
      this.$emit('update:fullscreen', this.full);
    },
    close() {
      this.$emit('update:visible', false);
    },
    closed() {
      this.$emit("closed");
    }
  },
  watch: {
    visible(val) {
      this.open = val;
    },
    fullscreen(val) {
      this.full = val;
    }
  }
}
</script>

<style scoped lang="scss">
  .maximize-btn {
    right: 44px;
  }

  .dialog-custom {
    & ::v-deep .el-dialog__headerbtn {
      font-size: 20px;
    }
  }
</style>
